<template>
  <tr>
    <th scope="row" >{{ classroom.classroomId }}</th>
    <td >{{ classroom.classroomName }}</td>
    <td >{{ classroom.classroomCategory }}</td>
    <td >{{ classroom.capacity }}</td>
    <td >{{ classroom.belongingBuilding }}</td>
    <td >{{ classroom.classroomDescription }}</td>
    <td >
        <el-button type="primary" icon="el-icon-edit" round @click="dialogVisible = true">修改</el-button>
        <el-button type="danger" icon="el-icon-delete" round @click="open" >删除</el-button>
        <el-button type="info" icon="el-icon-info" round @click="getClassroomInfo" >详情</el-button>
    </td>
    <el-dialog title="教室信息" :visible.sync="dialogTableVisible">
            <el-table :data="classroomInfo">
              <el-table-column property="classroomName" label="教室名" ></el-table-column>
              <el-table-column property="className" label="班级名" ></el-table-column>
              <el-table-column property="courseName" label="课程名"></el-table-column>
              <el-table-column property="userName" label="教师名"></el-table-column>
            </el-table>
          </el-dialog>

          <el-dialog :visible.sync="dialogVisible" title="添加教室" width="30%" :before-close="handleClose">
      <el-form label-width="100px">
        <el-form-item label="教室名字">
          <el-input v-model="classroom.classroomName"  placeholder="请输入教室名字"></el-input>
        </el-form-item>
        <el-form-item label="教室类型">
          <el-input v-model="classroom.classroomCategory" placeholder="请输入教室类型"></el-input>
        </el-form-item>
        <el-form-item label="教室容量">
          <el-input v-model="classroom.capacity" placeholder="请输入教室容量"></el-input>
        </el-form-item>
        <el-form-item label="归属楼栋">
          <el-input v-model="classroom.belongingBuilding" placeholder="请输入归属楼栋"></el-input>
        </el-form-item>
        <el-form-item label="教室描述">
          <el-input type="textarea" v-model="classroom.classroomDescription" placeholder="请输入教室描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>      
    <!-- <th scope="row" v-show="is_edit"><input class="w-25" type="text" v-model.number="classroom.classroomId"/></th>
    <td v-show="is_edit"><input type="text" class="w-50" v-model="classroom.classroomName"/></td>
    <td v-show="is_edit"><input type="text" class="w-50" v-model="classroom.classroomCategory"/></td>
    <td v-show="is_edit"><input type="text" class="w-50" v-model.number="classroom.capacity"/></td>
    <td v-show="is_edit"><input type="text" class="w-50" v-model="classroom.belongingBuilding"/></td>
    <td v-show="is_edit"><input type="text" class="w-50" v-model="classroom.classroomDescription"/></td>
    <td v-show="is_edit">
        <el-button type="success" round @click="save">保存</el-button>
        <el-button type="danger" round>删除</el-button>
    </td> -->
    <!-- <td v-show="is_edit">
        
    </td> -->
  </tr>
</template>

<script>
import axios from 'axios'

export default {
  props: ["classroom"],
 
  data() {
    return {
      is_edit: false,
      dialogVisible: false ,
      dialogTableVisible: false,
      classroomInfo: [
        {
          classroomName: '',
          className: '',
          courseName: '',
          userName: '',
        }
      ],
      
    }
  },
  // components() {
  //   // App
  // },
  methods: {
    getClassroomInfo() {
      axios({
        url: "http://localhost:8080/classroom/getClassroomInfo",
        method: 'Post',
        data: this.classroom.classroomId
      }).then(res => {
        this.classroomInfo[0] = res.data;
        this.dialogTableVisible = true
      })
    },
    handleClose() {
      // 关闭弹框并刷新页面
      this.dialogVisible = false;
      location.reload();
    },
    // update() {
    //   this.is_edit = true;
    // },
    save() {
      axios({
        url: "http://localhost:8080/classroom/update",
        method: "Post",
        data: this.classroom
      })
      this.dialogVisible =false;
    },
    del() {
      axios({
        url: "http://localhost:8080/classroom/delete",
        method: "Post",
        data: this.classroom
      }).then(() => {
        this.dialogVisible = false;
        this.$emit("classroomDeleted"); // 触发自定义事件
      })
    },
    open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.del();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
  }
}
</script>

<style>

</style>